%reset-button {
	-webkit-appearance: none;
	border: 0;

	&:focus {
		outline: 0;
	}
}

.grouped-buttons {
	display: flex;
	width: 100%;
	align-items: stretch;
	background-color: #fff;

	button, a {

		@extend %reset-button;
		background-color: #fff;
		color: #545454;
		padding: 10px 0;
		flex-basis: 100%;
		font-weight: 500;
		text-align: center;
		text-decoration: none;

		&:active {
			background-color: #e5e5e5;
		}

		&.active {
			background-color: $cuckoo_secundary_color;
			font-weight: 700;
			color: #fff;
		}

		&:hover, &:focus, &:active {
			text-decoration: none;
		}

		@include cuckoo-theme('cyborg') {
			background-color: $cyborg_primary_color;
			color: $cyborg_text_color;

			&.active {
				background-color: $cyborg_panel_color;
				color: $cyborg_secundary_color;
			}
		}

		@include cuckoo-theme('night') {
			background-color: $night_accent_color;
			color: $night_text_color;

			&.active {
				background-color: $night_darker_color;
				color: $cyborg_secundary_color;
			}
		}

	}

	&__bordered {
		@extend .grouped-buttons;
		background: transparent;
		margin-bottom: 15px;

		button, a {
			display: flex;
			background-color: #fff;
			padding: 10px 5px 10px 20px;
			border: 1px solid $cuckoo_border_color;
			border-right-width: 0;

			&:first-child {
				border-top-left-radius: 8px;
				border-bottom-left-radius: 8px;
			}
			&:last-child {
				border-top-right-radius: 8px;
				border-bottom-right-radius: 8px;
				border-right-width: 1px;
			}

			&:not(.active):not(.disabled):not([data-total="0"]) {
				&:hover{ background-color: #EFEFEF; }
			}

			.button-badge {
				display: inline-block;
				margin-left: auto;
				font-size: 12px;
				font-weight: 700;
				color: #fff;
				background-color: $cuckoo_default_grey;
				border-radius: 50px;
				padding: 3px 10px;
				vertical-align: middle;
			}

			&.active {
				border-color: darken($cuckoo_secundary_color, 10);
				border-right-width: 1px;

				& + button,
				& + a {
					border-left-width: 0px;
				}

				.button-badge {
					background-color: #fff;
					color: $cuckoo_secundary_color;
				}

			}

			&[data-total="0"]:not(.active),
			&.disabled:not(.active) {
				border-right-color: #ccc;
				color: #E1E1E1;

				.button-badge { background-color: #E1E1E1; }
				&:active { background-color: #fff; }
			}

			&.disabled:hover {
				cursor: not-allowed;
			}

			&.no-badge {
				flex: 0 0 auto;
				padding: 10px;
			}

		}

		@include cuckoo-theme('cyborg') {

			button, a {
				border-color: $cyborg_border_color;

				.button-badge {
					background-color: #000;
					color: $cyborg_secundary_color;
				}

				&:not(.active):not(.disabled):not([data-total="0"]) {
					&:hover {
						background-color: lighten($cyborg_primary_color, 10);
					}
				}

				&[data-total="0"] {
					opacity: .5;
					.button-badge {
						background-color: #000;
					}
				}

				&:hover, &:active, &:focus { text-decoration: none; }
			}

		}

		@include cuckoo-theme('night') {

			button, a {
				border-color: $night_border_color;
				background-color: $night_primary_color;

				.button-badge {
					background-color: #000;
					color: $night_text_color;
				}

				&[data-total="0"] {
					opacity: .5;
					.button-badge {
						background-color: #000;
					}
				}

				&:not(.active):not(.disabled):not([data-total="0"]) {
					&:hover {
						background-color: darken($night_primary_color, 5);
					}
				}

				&:hover, &:active, &:focus { text-decoration: none; }
			}

		}

	}

	// fills all the space evenly
	&.justify {

		button, a {
			flex-basis: 100%;
			flex-shrink: 1;
			flex-grow: 1;
			align-items: center;
			justify-content: center;
		}

	}

	// organize multiple rows of buttons
	&__rows {

		// disable margin bottom on these elements, except for the last one
		& > div:not(:last-child) {
			margin-bottom: 0;

			& > button,
			& > a {
				border-bottom: 0;
			}

		}

		// reset border radius
		& > .grouped-buttons > a,
		& > .grouped-buttons > button,
		& > .grouped-buttons__bordered > a,
		& > .grouped-buttons__bordered > button {
			border-radius: 0;
		}

		// apply top border radius (assuming child divs to be grouped button parents)
		& > div:first-child {
			& > *:first-child { border-top-left-radius: 8px; }
			& > *:last-child { border-top-right-radius: 8px; }
		}

		// apply bottom border radius (to top row) (assuming child divs to be grouped button parents)
		& > div:last-child {
			& > *:first-child { border-bottom-left-radius: 8px; }
			& > *:last-child { border-bottom-right-radius: 8px; }
		}

	}

}

// default button
.button {

	-webkit-appearance: none;
	border: 0;

	color: #fff;
	font-weight: 600;
	background-color: #6297F8;
	padding: 5px 10px;
	border-radius: 4px;
	border-bottom: 1px solid #4F7CCF;
	line-height: 16px; // small fix for having <button.button> and <a.button> the same height

	@include cuckoo-theme('cyborg') {
		color: #fff;
		&:hover { color: #fff; text-decoration: none; }
	}

	@include cuckoo-theme('night') {
		color: #fff;
		&:hover { color: #fff; text-decoration: none; }
	}

	&:hover {
		color: #fff;
		background-color: darken(#6297F8, 5);
		border-bottom-color: darken(#4F7CCF, 5);
		text-decoration: none;
	}

	&:focus,
	&:active {
		outline: none;
		text-decoration: none;
	}

	&--lg {
		@extend .button;
		font-size: 16px;
		padding: 5px 15px;
		border-bottom-width: 2px;
	}

	&--sm {
		@extend .button;
		font-size: 13px;
		padding: 3px 10px;
	}

	&.outline {
		background-color: transparent;
		border: 2px solid #fff;
		padding-top: 4px;
		padding-bottom: 4px;
	}

	&.inversed {
		background-color: transparent;
		border: 0;
		color: #6297F8;

		&:hover {
			color: darken(#6297F8, 5);
		}
	}

	&.variation-blue {
		background-color: #6297F8;
		border: 1px solid #528fff;
		box-shadow: 0px 1px 0px #4F7CCF;
		color: #fff;
	}

	&.variation-grey {
		background-color: #FFFFFF;
		border: 1px solid #EBEBEB;
		box-shadow: 0px 1px 0px #C5C5C5;
		color: #757575;
	}

	.fa {
		margin-right: 5px;
	}

	@include cuckoo-theme('cyborg') {
		color: #fff;
	}

	&-nav {
		display: flex;
		& > * { flex-basis: 100%; }
		&__right { text-align: right; }
	}

}
